<template>
  <el-input v-bind="computedBind" ref="inputRef" @update:model-value="handleUpdateModelValue">
    <template v-if="slots.prefix" #prefix>
      <slot name="prefix"></slot>
    </template>
    <template v-if="slots.suffix" #suffix>
      <slot name="suffix"></slot>
    </template>
    <template v-if="slots.prepend" #prepend>
      <slot name="prepend"></slot>
    </template>
    <template v-if="slots.append" #append>
      <slot name="append"></slot>
    </template>
  </el-input>
</template>
<script lang="ts" setup>
import {ref, onMounted, computed, useAttrs} from 'vue'

type BsInputProps = {
  size?: 'large' | 'default' | 'small'
}

const props = withDefaults(defineProps<BsInputProps>(), {
  size: 'default'
})
const slots = defineSlots<{
  prefix: any
  suffix: any
  prepend: any
  append: any
}>()
const emit = defineEmits(['update:model-value'])

const inputRef = ref()
const expose:any = {}
const computedBind = computed(() => {
  return {...props, ...useAttrs()}
})
const handleUpdateModelValue = (value: any) => {
  emit('update:model-value', value)
}
onMounted(() => {
  const keys = ['blur', 'clear', 'focus', 'input', 'ref', 'resizeTextarea', 'select', 'textarea', 'textareaStyle']
  if (inputRef.value) {
    for (let key of keys) {
      expose[key] = inputRef.value[key]
    }
  }
})
defineExpose(expose)

</script>
